<template>
<div style="text-align: left">
  <div>
    <el-dialog title="删除权限页面" :visible.sync="addVisible" destroy-on-close>
      <el-transfer
        v-model="yesData"
        :props="{key: 'chaojiid',label: 'accessname'}"
        :titles="['已拥有权限', '已删除的权限']"
        @change="handleChange"
        :data="noData"
      ></el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">关闭页面</el-button>
      </div>
    </el-dialog>
  </div>
  <div>
    <el-dialog title="增加权限页面" :visible.sync="QX" destroy-on-close>
      <el-transfer
        v-model="noshuju"
        :props="{key: 'id',label: 'accessname'}"
        :titles="['全部权限', '已添加的权限']"
        @change="addChange"
        :data="shuju"
      ></el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="QX = false">关闭页面</el-button>
      </div>
    </el-dialog>
  </div>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="编号"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.rid }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="角色名称"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.rolename }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.rolename }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="角色介绍"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="角色状态"
        width="180">
        <template slot-scope="scope">
          <span class="el-tag el-tag--success el-tag--mini el-tag--light">{{ scope.row.status==0?'正常':(scope.row.status==1?'禁用':'异常') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdits(scope.row.rid)">删除权限</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="addquanxian(scope.row.rid)">增加权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>
export default {
  name: 'roleaccess',
  data () {
    return {
      shuju: [],
      noshuju: [],
      QX: false,
      noData: [],
      yesData: [],
      tableData: [],
      addVisible: false,
      roleids: ''
    }
  },
  mounted () {
    this.listrole()
  },
  methods: {
    async listrole () {
      const { data: res } = await this.$axios.post('/listrole')
      this.tableData = res.roles
    },
    async addquanxian (row) {
      this.QX = true
      const { data } = await this.$axios.post('/listaccess')
      console.log(data)
      this.shuju = data.logg
      this.roleids = row
    },
    async handleEdits (row) {
      this.addVisible = true
      const { data } = await this.$axios.post('/listid', {
        rid: row
      })
      this.noData = data.logg
    },
    async handleChange (value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      if (direction === 'right') {
        alert(value)
        const { data } = await this.$axios.post('/delroleaccess?chaojiid=' + value)
        if (data !== 0) {
          this.$notify({
            title: '成功',
            message: '权限删除成功了',
            type: 'success'
          })
        }
      }
      if (direction === 'left') {
        alert('发生了向左')
      }
    },
    async addChange (value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      if (direction === 'right') {
        alert(this.roleids)
        alert(value)
        const { data } = await this.$axios.post('/insertaccess?roleid=' + this.roleids + '&accessid=' + value)
        if (data !== 0) {
          this.$notify({
            title: '成功',
            message: '权限增加成功了',
            type: 'success'
          })
        }
      }
      if (direction === 'left') {
        alert('发生了向左')
      }
    }
  }
}
</script>

<style scoped>

</style>
